<template>
  <div class="app-container">
    <div class="customContainer">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-input
            v-model="formInline.name"
            placeholder="请输入仓库名称"
            @keyup.enter.native="searchClick"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick">
            <template #default>搜索</template>
          </dj-button>
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <el-table
        highlight-current-row
        :data="list"
        v-loading.body="listLoading"
        border
        fit
        size="small"
      >
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            <span class="indexColor">{{scope.$index+1+(currentPage-1)*20}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="仓库名称" prop="name"></el-table-column>
        <el-table-column align="center" label="所在地区">
          <template
            slot-scope="scope"
          >{{scope.row.prov_name}} / {{scope.row.city_name}} / {{scope.row.dist_name}}</template>
        </el-table-column>
        <el-table-column align="center" label="详细地址" prop="address"></el-table-column>
        <el-table-column align="center" label="联系人">
          <template slot-scope="scope">{{scope.row.linkman == 0 ?'-':scope.row.linkman}}</template>
        </el-table-column>
        <el-table-column align="center" label="联系方式">
          <template slot-scope="scope">{{scope.row.phone == 0 ?'-':scope.row.phone}}</template>
        </el-table-column>
        <el-table-column align="center" label="电子邮件">
          <template slot-scope="scope">{{scope.row.email == 0 ?'-':scope.row.email}}</template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              @click="addEditClick(scope.row,scope.$index)"
              type="primary"
              icon="el-icon-edit"
              size="mini"
            ></el-button>
            <!-- <el-button @click="delClick(scope.row.id,scope.$index)" v-if="scope.row.is_store_main==0" type="danger"
            icon="el-icon-delete" size="mini"></el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹框 -->
      <el-dialog
        :close-on-click-modal="false"
        width="440px"
        :title="dialogTitle"
        :visible.sync="addhouseDialog"
        @close="callOf('saveForm')"
      >
        <el-form :model="saveForm" ref="saveForm" :rules="rules">
          <el-form-item label="仓库名称" prop="name">
            <el-input v-model="saveForm.name"></el-input>
          </el-form-item>
          <el-form-item label="所在地区" required></el-form-item>
          <el-form-item prop="prov_id" style="display:inline-block">
            <el-select
              style="width:130px"
              v-model="saveForm.prov_id"
              placeholder="请选择省"
              :disabled="isDisabled"
              @change="provChange"
            >
              <el-option
                v-for="item in provList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="city_id" style="display:inline-block">
            <el-select
              style="width:130px"
              v-model="saveForm.city_id"
              placeholder="请选择市"
              :disabled="isDisabled"
              @change="cityChange"
            >
              <el-option
                v-for="item in cityList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="dist_id" style="display:inline-block">
            <el-select
              style="width:130px"
              v-model="saveForm.dist_id"
              placeholder="请选择区"
              :disabled="isDisabled"
            >
              <el-option key="0" label="选择区" value="0"></el-option>
              <el-option
                v-for="item in distList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="address">
            <el-input type="text" :rows="2" placeholder="请输入详细地址" v-model="saveForm.address"></el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="linkman">
            <el-input v-model="saveForm.linkman"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="phone">
            <el-input v-model="saveForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="电子邮件" prop="email">
            <el-input v-model="saveForm.email"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="saveClick('saveForm')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination
        class="pull-left"
        background
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="totalDataNumber"
      ></el-pagination>
      <!-- <el-button class="pull-right" type="primary" size="small" @click="addEditClick()">新增</el-button> -->
    </div>
  </div>
</template>

<script>
import { getList, getPage, save } from "@/api/information/storage";
import { get_district } from "@/api/region/region";
export default {
  data() {
    return {
      dialogTitle: "",
      machineInfo: "",
      url: "",
      list: null,
      listLoading: false,
      isDisabled: false,
      provList: [],
      cityList: [],
      distList: [],
      currentPage: 1,
      totalDataNumber: 0,
      formInline: {
        name: "",
      },
      addhouseDialog: false,
      saveForm: {
        name: "",
        prov_id: "",
        city_id: "",
        dist_id: "",
        address: "",
        linkman: "",
        phone: "",
        email: "",
      },
      rules: {
        name: [{ required: true, message: "请输入仓库名称", trigger: "blur" }],
        intro: [{ required: true, message: "请输入描述", trigger: "blur" }],
        prov_id: [{ required: true, message: "请选择省", trigger: "change" }],
        city_id: [{ required: true, message: "请选择市", trigger: "change" }],
        dist_id: [{ required: true, message: "请选择区", trigger: "change" }],
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
        linkman: [{ required: true, message: "请输入联系人", trigger: "blur" }],
        phone: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
      },
    };
  },
  created() {
    this.searchClick();
  },
  methods: {
    getProv() {
      get_district({}).then((response) => {
        this.provList = response;
      });
    },
    getCity() {
      get_district({ id: this.saveForm.prov_id }).then((response) => {
        this.cityList = response;
      });
    },
    getDist() {
      get_district({ id: this.saveForm.city_id }).then((response) => {
        this.distList = response;
      });
    },
    provChange() {
      this.saveForm.city_id = "";
      this.saveForm.dist_id = "";
      this.getCity();
    },
    cityChange() {
      this.saveForm.dist_id = "";
      this.getDist();
    },
    saveClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.saveForm.name = this.saveForm.name.trim();
          this.saveForm.address = this.saveForm.address.trim();
          this.saveForm.linkman = this.saveForm.linkman.trim();
          this.saveForm.phone = this.saveForm.phone.trim();
          this.saveForm.email =
            this.saveForm.email == null ? "" : this.saveForm.email;
          save(this.saveForm, this.url).then((response) => {
            this.$message({ type: "success", message: response.message });
            this.handleCurrentChange(this.currentPage);
            this.addhouseDialog = false;
          });
        }
      });
    },
    addEditClick(row, index) {
      this.addhouseDialog = true;
      this.getProv();
      this.dialogTitle = row ? "编辑仓储" : "新增仓储";
      this.url = row ? "/House/edit" : "/House/add";
      this.saveForm.id = row ? row.id : "";
      this.saveForm.name = row ? row.name : "";
      this.saveForm.prov_id = row ? row.prov_id : "";
      this.saveForm.city_id = row ? row.city_id : "";
      this.saveForm.dist_id = row ? row.dist_id : "";
      this.saveForm.address = row ? row.address : "";
      this.saveForm.linkman = row ? row.linkman : "";
      this.saveForm.phone = row ? row.phone : "";
      this.saveForm.email = row ? row.email : "";
      if (row) {
        this.getCity(this.saveForm.prov_id);
        this.getDist(this.saveForm.city_id);
      }
    },
    // 搜索
    searchClick() {
      this.fetchData();
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.currentPage = 1;
      getPage(this.formInline)
        .then((response) => {
          this.totalDataNumber = response.page * 20;
          getList(this.formInline).then((response) => {
            this.list = response;
            this.listLoading = false;
          });
        })
        .catch((res) => {
          this.listLoading = false;
        });
    },
    // 分页
    handleCurrentChange(val) {
      this.listLoading = true;
      getList(this.formInline, val).then((response) => {
        this.list = response;
        this.listLoading = false;
      });
    },
    //关闭弹框重置
    callOf(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>